.Movies {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  background-image: linear-gradient(var(--background-g2));
  --background-g1: #fff;
  --background-g2: 90deg, #1a2e4a 0, #409890 100%;
  --background-g3: 90deg, rgba(16, 36, 65, 0.259) 0, rgba(17, 85, 99, 0.259) 100%;
  --background-g4: 180deg, #16e09d 0%, #16e05a 100%;
  --text-g1: #222;
  --text-g2: #666;
  --text-g3: #999;
  --text-g4: #fff;
  --text-g5: #435570;
  --text-g6: #00cc36;
  --text-g7: #f53;
  --text-g8: #bb8c52;
  --text-reverse-g1: #222;

  * {
    padding: 0;
    margin: 0;
  }

  li {
    list-style: none;
  }

  .MoviesHeader {
    width: 100%;
    height: 15vw;
    padding: 2vw 3vw;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .MoviesHeader_logo {
      width: 7vw;
      margin-left: 2vw;

      img {
        width: 100%;
      }
    }

    .MoviesHeader_search {
      width: 63%;
      height: 8vw;

      .MoviesHeaderViesInput {
        border: none;
        width: 100%;
        height: 8vw;
        border-radius: 20px;
        color: rgba(255, 255, 255, 0.6);
        background: rgba(255, 255, 255, 0.2);
        display: block;
        margin-bottom: 3vw;
        text-align: left;
        padding-left: 4vw;
      }
    }

    .MoviesHeader_bottom {
      width: 20%;
      height: 7vw;
    }

    .MoviesHeader_bottom_body {
      width: 100%;
      height: 7vw;
      background: #16e091;
      border-radius: 2px;
      color: #425870;
      font-size: 0.8rem;
      line-height: 7vw;
      font-weight: 600;
    }
  }

  .MoviesTab {
    width: 100%;
    height: 10vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 0;
    margin-bottom: 2vw;

    li {
      width: auto;
      height: 10vw;
      text-align: center;
      line-height: 10vw;
      color: rgba(255, 255, 255, 0.8);
      font-size: 1.1rem;
      position: relative;

      .border {
        background-image: linear-gradient(to right, #16e05a 0, #16e09d 100%);
        position: absolute;
        bottom: 0;
        left: 25%;
        margin: 0 auto;
        display: block;
        width: 45%;
        height: 1vw;
        border-radius: 5px;
      }
    }

    .borderColor {
      color: #fff;
      font-size: 1.2rem;
    }
  }

  .MoviesBody {
    width: 100%;
    height: auto;
    background: #fff;

    .film {

      .filmCz {
        width: 100%;
        height: 20vw;
        display: flex;
        padding: 4vw;
        justify-content: space-between;

        .filmCzType {
          min-width: 50px;
          margin-right: 20px;
          padding: 0 5px;
          border-radius: 16px 0 16px 16px;
          background-color: #7f7f8c;
          color: #fff;
          line-height: 13vw;
          text-align: center;
        }

        li {
          text-align: center;
          line-height: 6vw;
          color: #999;
          width: 6vw;
        }

        .active {
          background-color: #f7eae8;
          color: #ff5c38;
          font-weight: 700;
          border-radius: 10px;
        }
      }

      .filmBody {
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        padding: 3vw;
        justify-content: space-between;

        .filmBodyLi {
          width: 30%;
          height: 45vw;
          margin-bottom: 3vw;

          img {
            width: 100%;
          }

          p {
            overflow: hidden; //超出的文本隐藏
            text-overflow: ellipsis; //溢出用省略号显示
            white-space: nowrap; //溢出不换行
          }
        }
      }
    }

    .selected {
      .slick-initialized {
        .slick-dots-bottom {
          margin: 0;
          width: 20%;
          left: 75%;
          bottom: 6vw;
        }
      }

      .selectedCarousel {
        position: relative;

        .selectedCarouselImg {
          background-size: 165% !important;
          background-position: -35vw 0 !important;
          background-repeat: no-repeat !important;
          width: 100%;
          height: 100%;
        }

        .selectedCarouselTitle {
          position: absolute;
          bottom: 20vw;
          left: 4vw;
          color: #fff;
          font-weight: 600;
          font-size: 1.2rem;
          width: 65%;
          text-align: left;
          height: 10vw;
        }
      }

      .CarouselSelectedBox {
        width: 100%;
        height: 48vw;
      }

      // 电影的展示
      .selectedFilmBody {
        width: 100%;
        height: auto;
        padding: 2vw;

        h3 {
          padding-left: 1vw;
          color: #333333;
          font-size: 1.2rem;
          font-weight: 600;
          margin-bottom: 2vw;
        }

        .selectedFilmBodyUl {
          width: 100%;
          height: auto;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          justify-content: space-between;

          li {
            width: 30%;
            margin: 0 2vw 2vw 0;

            img {
              width: 100%;
              margin: 0 auto;
              display: block;
            }

            p {
              overflow: hidden; //超出的文本隐藏
              text-overflow: ellipsis; //溢出用省略号显示
              white-space: nowrap; //溢出不换行
            }
          }
        }

        .selectedFilmBodycaozuo {
          width: 100%;
          height: 10vw;
          display: flex;
          justify-content: space-around;
          align-items: center;
          color: #222;

          .selectedFilmBodySize {
            margin-right: 2vw;
            color: #0bbe06;
          }
        }
      }
    }
  }
}